<template>
	<view class="video-item" :style="{ height: screenHeight + 'px' }">
		<!-- 视频容器 -->
		<view class="video-container">
           <!-- <video 
				:src="videoData.videoUrl" 
				:poster="videoData.cover"
				class="video-player"
				:controls="false"
				:show-center-play-btn="false"
				:enable-play-gesture="true"
				:autoplay="isActive"
				:loop="true"
                :muted="true"
				@play="handlePlay"
				@pause="handlePause"
			></video> -->
		</view>
		
		<!-- 视频信息覆盖层 -->
		<view class="video-overlay">
            <!-- 左下角信息块（标题/简介/弹幕/展开） -->
            <view class="info-left">
                <view class="author-line">
                    <text class="author-name">{{ videoData.authorName }}</text>
                    <text class="channel-tag">@{{ videoData.channelName }}</text>
                </view>
                <view class="titles">
                    <text class="title-main">{{ videoData.title }}</text>
                    <text v-if="videoData.subtitle" class="title-sub">{{ videoData.subtitle }}</text>
                </view>
            </view>
			
            <!-- 保留底部容器用于留白 -->
            <view class="video-bottom"></view>
			
			<!-- 作者声明 -->
			<view class="author-statement" @click="handleStatementClick">
				作者声明:拍摄于 {{ videoData.filmDate }} {{ videoData.filmLocation }} >
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
	videoData: {
		type: Object,
		required: true
	},
	isActive: {
		type: Boolean,
		default: false
	},
	screenHeight: {
		type: Number,
		default: 667
	}
})

const emit = defineEmits(['play', 'pause', 'statementClick'])

// 展开逻辑已取消

const handlePlay = () => {
	emit('play', props.videoData)
}

const handlePause = () => {
	emit('pause', props.videoData)
}

// no-op

// 弹幕已移除

// 章节相关已移除

const handleStatementClick = () => {
	emit('statementClick', props.videoData)
}
</script>

<style scoped lang="scss">
.video-item {
	position: relative;
	width: 100%;
	background: #000;
	overflow: hidden;
}

.video-container {
	width: 100%;
	height: 100%;
}

.video-player {
	width: 100%;
	height: 100%;
}

.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0 24rpx;
    padding-top: 100rpx;
	padding-bottom: 120rpx;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.6) 100%);
}

.info-left {
    position: absolute;
    left: 28rpx;
    right: 200rpx; /* 更多右侧留白，避开按钮 */
    bottom: 220rpx; /* 高于作者声明，保证不重叠 */
}

.author-line { display: flex; align-items: center; gap: 12rpx; margin-bottom: 8rpx; }
.author-name { font-size: 28rpx; color: #fff; font-weight: 600; }
.channel-tag { font-size: 26rpx; color: #fff; opacity: 0.9; }

.titles { display: flex; flex-direction: column; gap: 6rpx; }
.title-main { font-size: 34rpx; color: #fff; font-weight: 700; line-height: 1.34; }
.title-sub { font-size: 30rpx; color: #fff; font-weight: 700; line-height: 1.3; opacity: 0.95; }

.author-info {
	margin-bottom: 40rpx;
}

.author-name {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}

.name {
	font-size: 28rpx;
	color: #fff;
	font-weight: 500;
	margin-right: 12rpx;
}

.at {
	font-size: 28rpx;
	color: #fff;
}

.author-title {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 12rpx;
}

.video-desc {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
}

.video-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
}

.bottom-left {
	display: flex;
	align-items: center;
}

.danmu-btn {
	width: 60rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.danmu-text {
	font-size: 24rpx;
	color: #fff;
	font-weight: 500;
}

.channel-tag {
	font-size: 28rpx;
	color: #fff;
}

.bottom-right {
	display: flex;
	gap: 16rpx;
}

.chapter-btn {
	padding: 12rpx 24rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.5);
	border-radius: 8rpx;
	font-size: 24rpx;
	color: #fff;
	background: rgba(0, 0, 0, 0.3);
}

/* 删除旧的 video-subtitle 布局 */

.subtitle-text {
    font-size: 28rpx;
    color: #fff;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.subtitle-text.expanded {
    -webkit-line-clamp: unset;
}

.expand-btn {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
    margin-left: 8rpx;
}

.author-statement {
    position: absolute;
    left: 24rpx;
    right: 24rpx;
    bottom: 140rpx; /* 位于作者与标题下方，不与其重叠 */
    font-size: 22rpx;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
}
</style>

